<script lang="ts" setup>
import { useDept } from './utils'
import { transformI18n } from '@/plugins/i18n'

const { columns, loading, dataList, openModal, deleteData } = useDept()
</script>

<template>
  <div class="dept">
    <a-card>
      <SpTable
        :column-list="columns"
        :data="dataList"
        :defaultExpandAllRows="true"
        :loading="loading"
        :row-key="(record) => record.id"
        add-button
        @add-change="openModal('新增')"
      >
        <template #operation="{ record }">
          <a-button size="small" type="link" @click="openModal('编辑', record)">{{
            transformI18n('btn.edit')
          }}</a-button>
          <a-button size="small" type="link" @click="openModal('新增', record)">{{
            transformI18n('btn.add')
          }}</a-button>
          <a-popconfirm
            cancel-text="取消"
            ok-text="确定"
            placement="left"
            title="您确认删除这条数据吗？"
            @confirm="deleteData(record)"
          >
            <a-button danger size="small" type="link">{{ transformI18n('btn.delete') }}</a-button>
          </a-popconfirm>
        </template>
      </SpTable>
    </a-card>
  </div>
</template>

<style scoped></style>
